<template>
  <div class="form-container">
    <div class="login-box">
      <div class="login-title"><span>欢迎注册迷你微商城</span></div>
      <form action="#" method="post">
        <div class="form-group">
          <input type="email" class="form-input" name="email" placeholder="请输入电子邮箱" v-model="formData.email" v-if="1===step"/>
        </div>
        <div class="form-group password-group">
          <input type="password" class="form-input" placeholder="密码为6-18个非空白字符" name="password"
                 v-model="formData.password" v-if="2===step"/>
        </div>
        <div class="form-group password-group">
          <input type="password" class="form-input" placeholder="确认密码必须与密码相同" name="confirmPwd"
                 v-model="formData.confirmPwd" v-if="2===step"/>
        </div>
        <div  v-if="1===step">
          <input type="text" class="form-input" placeholder="验证码"
                 style="padding-right: 200px;box-sizing: border-box;" v-model="formData.emailCode" name="emailCode"
                />
          <span style="float:right;position: relative;bottom:36px;margin-right: 10px;line-height: 36px;">
            <a href="javascript:void(0)" id="sendMail" v-if="0===counter" @click="sendRegCode">发送邮件验证码</a>
            <span id="counter" v-if="counter>0">邮箱验证码有效期剩余{{ counter }}秒</span>
          </span>
        </div>
        <div class="form-group">
          <input type="button" class="action-btn" value="下一步" v-if="1===step" @click="nextStep" >
          <input type="button" class="action-btn" value="注册" v-if="2===step" @click="register">
        </div>
        <div class="form-footer">
          <span style="color: #adadad;">已有帐号</span>
          <a href="javascript:void(0)" @click="$emit('show-modal', 1)">登录</a>
          <a href="javascript:void(0)" @click="$emit('show-modal', 3)">忘记密码</a>
        </div>
        <div style="text-align: center;font-size: 13px;">
          <span id="message" style="display:none"></span>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
//导入个模块中函数
import {ref, reactive,toRaw} from "vue";
import {ElMessage} from "element-plus";
import apis from "@/config/api-config";
import getResponse from "@assets/js/http-client.js";
import {validatePassword, validateEmail, validateEmailCode} from '@assets/js/form-data-validate.js';
//定义子组件事件
const emit = defineEmits(['show-modal']);
//定义响应式数据
//邮箱验证码倒计时计数器
const counter = ref(0);
//form表单数据
const formData = reactive({
  email: '',
  password: '',
  confirmPwd: '',
  emailCode: ''
});
//注册步骤
const  step = ref(1);

//定义功能函数
//发送邮件验证码函数
const sendRegCode = async () => {
  if (counter.value > 0) {
    return;
  }
  const email = formData.email;
  if (!email) {
    ElMessage.warning('请输入邮箱!');
    return;
  }
  if (!validateEmail(email)) {
    ElMessage.warning('请输入正确的邮箱格式!');
    return;
  }
  //调用发送注册邮件验证码接口
  let url = apis.member.sendRegCode.url;
  let type = apis.member.sendRegCode.type
  const result = await getResponse(url, type, {email});
  if (200 !== result.code) {
    ElMessage.warning(result.message);
    return;
  }
  ElMessage.success('邮箱验证码发送成功!');
  //倒计时180秒
  counter.value = 180;
  //倒计时180秒
  let timer = setInterval(() => {
    counter.value--;
    if (counter.value <= 0) {
      clearInterval(timer);
      counter.value = 0;
    }
  }, 1000);
};
/**
 * 下一步
 */
const nextStep=()=>{
  ElMessage.closeAll();
  if (!checkStepOne()) {
    return;
  }
  step.value=2;
}
/**
 * 校验注册步骤一
 */
const  checkStepOne=()=>{
  ElMessage.closeAll();
  const email=formData.email;
  if (!email) {
    ElMessage.warning('请输入邮箱!');
    return false;
  }
  if (!validateEmail(email)) {
    ElMessage.warning('请输入正确的邮箱格式!');
    return false;
  }
  const emailCode=formData.emailCode;
  if (!emailCode) {
    ElMessage.warning('请输入邮箱验证码!');
    return false;
  }
  if (!validateEmailCode(emailCode)) {
    ElMessage.warning('请输入正确的邮箱验证码格式!');
    return false;
  }
  return true;
}
/**
 * 会员注册
 */
const  register=async ()=>{
  ElMessage.closeAll();
  if (!checkStepOne()) {
    return;
  }
  const password=formData.password;
  if (!password) {
    ElMessage.warning('请输入密码!');
    return;
  }
  if (!validatePassword(password)) {
    ElMessage.warning('密码必须包含数字、大写字母、小写字母、标点符号其中三种，长度范围为8-20!');
    return;
  }
  const confirmPwd=formData.confirmPwd;
  if (!confirmPwd) {
    ElMessage.warning('请输入确认密码!');
    return;
  }
  if (password!==confirmPwd) {
    ElMessage.warning('两次输入的密码不一致!');
    return;
  }
  //调用注册接口
  let url = apis.member.register.url;
  let type = apis.member.register.type;
  let params={...toRaw(formData)}
  const result = await getResponse(url, type, params);
  if (200 !== result.code) {
    ElMessage.warning(result.message);
    return;
  }
  ElMessage.success('注册成功!');
  //注册成功后显示登录界面
  emit('show-modal', 1);
}
</script>

<style scoped>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 450px;
  padding: 20px;
}

.login-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.login-title {
  padding: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

form {
  padding: 25px;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-input {
  min-width: 360px;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #007BFF;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.password-group {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 5px;
}

.action-btn {
  width: 100%;
  padding: 12px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background-color: #0056b3;
}

.form-footer {
  text-align: center;
  margin-top: 15px;
  font-size: 14px;
}

.form-footer a {
  color: #007BFF;
  text-decoration: none;
  margin: 0 5px;
}

.form-footer a:hover {
  text-decoration: underline;
}

#counter {
  font-size: 14px;
  color: #999;
  font-weight: lighter;
}
</style>